<template>
  <div class="menu">
    <div @click="setCurrentKey(key)"
         v-for="(val, key) in menu"
         :key="key"
         :class="['menu-item', {active: key === currentKey}]">{{val}}
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      menu: ['男生', '女生', '电信&移动', '年龄(升序)'],
      currentKey: -1
    }
  },
  methods: {
    setCurrentKey (index) {
      this.currentKey = index
      this.$bus.$emit('changeCurrentKey', index)
    }
  }
}
</script>
<style scoped>
    .menu{
        position: fixed;
        left: 0;
        right: 0;
        bottom:0;
        background: orange;
        font-size: 0;
        border-top: solid 1px gainsboro;
    }
    .menu>div{
        display: inline-block;
        width: 25%;
        text-align: center;
        font-size: 14px;
        color: #fff;
        line-height: 60px
    }
    .menu>.active{
      color: red;
    }
</style>
